import React, { Component, Fragment } from "react"
import { CSSTransition } from "react-transition-group"

export class CSSTransitionTest extends Component {
  state = {
    isShow: true
  }

  showConsoleLog(t){
    console.log(t)
  }

  render() {
    return (
      <Fragment>
        <CSSTransition
          in={this.state.isShow} //in 数据用于感知组件状态，当为 true 时表示组件入场，false 为出场
          timeout={300} //动画的执行时间，所对应的就是改变类的时间，所以最好 transition-time 和这个值是相对应的
          classNames={"fade"} //动画过程中添加所添加类名的前缀
          unmountOnExit //当出场动画执行完毕后卸载这个元素，也就是从 DOM 中删除
          appear={true} //第一次加载时也添加入场动画，但是是通过在第一帧添加 fade-appear 类和之后添加 fade-appear-active 来实现的
          onEnter={this.showConsoleLog('OnEnter')} //入场动画第一帧或者说动画开始时的钩子 
          onEntering={this.showConsoleLog('onEntering')} //入场动画第一帧到最后一帧或者说动画进行中的钩子
          onEntered={this.showConsoleLog('onEntered')} //入场动画最后一帧或者说动画结束时的钩子
          onExit={this.showConsoleLog('OnExit')} //出场动画第一帧或者说动画开始时的钩子 
          onExiting={this.showConsoleLog('OnExiting')} //出场动画第一帧到最后一帧或者说动画进行中的钩子
          onExited={this.showConsoleLog('OnExited')} //出场动画最后一帧或者说动画结束时的钩子
        >
          <div>使用 react-transition-group 包来实现动画</div>
        </CSSTransition>
        <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
          点击切换动画效果
        </button>
      </Fragment>
    )
  }
}

export default CSSTransitionTest
